<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div-card {
            border: 1px gray solid;
            border-radius: 10px;
            padding: 15px;
        }

        .div-card-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .div-card-son {
            height: 100px;
            color: darkgray;
            font-size: 15px;
        }
    </style>
  </head>

  <body>
    <!--column-count属性设置列数量，这些列具有弹性宽度并由浏览器计算-->
    <div class="div-card">
      <div class="div-card-title">
        column-count属性设置列数量，这些列具有弹性宽度并由浏览器计算
      </div>
      <div class="div-card-body" style="column-count: 4">
        <div class="div-card-son" style="background: pink"></div>
        <div class="div-card-son" style="background: skyblue"></div>
        <div class="div-card-son" style="background: plum"></div>
        <div class="div-card-son" style="background: yellowgreen"></div>
      </div>
      <br>
      <div class="div-card-body" style="column-count:3">
        <div class="div-card-son" style="background: pink"></div>
        <div class="div-card-son" style="background: skyblue"></div>
        <div class="div-card-son" style="background: plum"></div>
        <div class="div-card-son" style="background: yellowgreen"></div>
      </div>
    </div>
    <br>

    <!--column-width属性设置列宽度，设置列宽度后这些列仍然具有弹性宽度并由浏览器计算-->
    <div class="div-card">
      <div class="div-card-title">
        column-width属性设置列宽度，设置列宽度后这些列仍然具有弹性宽度并由浏览器计算
      </div>
      <div class="div-card-body" style="column-count:4;column-width: 200px">
        <div class="div-card-son" style="background: pink"></div>
        <div class="div-card-son" style="background: skyblue"></div>
        <div class="div-card-son" style="background: plum"></div>
        <div class="div-card-son" style="background: yellowgreen"></div>
      </div>
      <br>
      <div class="div-card-body" style="column-width: 200px">
        <div class="div-card-son" style="background: pink"></div>
        <div class="div-card-son" style="background: skyblue"></div>
        <div class="div-card-son" style="background: plum"></div>
        <div class="div-card-son" style="background: yellowgreen"></div>
      </div>
    </div>
    <br>

    <!--column-gap属性设置列间隙-->
    <div class="div-card">
      <div class="div-card-title">
        column-gap属性设置列间隙
      </div>
      <div class="div-card-body" style="column-count:4">
        <div class="div-card-son" style="background: pink"></div>
        <div class="div-card-son" style="background: skyblue"></div>
        <div class="div-card-son" style="background: plum"></div>
        <div class="div-card-son" style="background: yellowgreen"></div>
      </div>
      <br>
      <div class="div-card-body" style="column-count:4;column-gap: 0px">
        <div class="div-card-son" style="background: pink"></div>
        <div class="div-card-son" style="background: skyblue"></div>
        <div class="div-card-son" style="background: plum"></div>
        <div class="div-card-son" style="background: yellowgreen"></div>
      </div>
      <br>
      <div class="div-card-body" style="column-count:4;column-gap: 100px">
        <div class="div-card-son" style="background: pink"></div>
        <div class="div-card-son" style="background: skyblue"></div>
        <div class="div-card-son" style="background: plum"></div>
        <div class="div-card-son" style="background: yellowgreen"></div>
      </div>
    </div>
    <br>

    <!--column-rule属性设置列分割线，该属性是分割线颜色column-rule-color、分割线样式column-rule-style和分割线宽度column-rule-width的结合体。分割线本身不占据宽度，被镶嵌于间隙column-gap间-->
    <div class="div-card">
      <div class="div-card-title">
        column-rule属性设置列分割线
      </div>
      <div class="div-card-body" style="column-count:4;column-rule: 2px gray solid">
        <div class="div-card-son" style="background: pink"></div>
        <div class="div-card-son" style="background: skyblue"></div>
        <div class="div-card-son" style="background: plum"></div>
        <div class="div-card-son" style="background: yellowgreen"></div>
      </div>
      <br>
      <div class="div-card-body" style="column-count:4;column-rule: 100px gray solid">
        <div class="div-card-son" style="background: pink"></div>
        <div class="div-card-son" style="background: skyblue"></div>
        <div class="div-card-son" style="background: plum"></div>
        <div class="div-card-son" style="background: yellowgreen"></div>
      </div>
      <br>
      <div class="div-card-body" style="column-count:4;column-gap: 110px;column-rule: 100px gray solid">
        <div class="div-card-son" style="background: pink"></div>
        <div class="div-card-son" style="background: skyblue"></div>
        <div class="div-card-son" style="background: plum"></div>
        <div class="div-card-son" style="background: yellowgreen"></div>
      </div>
    </div>
    <br>

    <!--break-inside属性设置列折断，其属性值可为自适应auto、禁止页折断avoid-page、禁止列折断avoid-column、禁止任何折断avoid-region-->
  </body>
</html>